@aa:#fff;
@bb:#e5e5e5;
html,body{
    width: 100%;
    height: 100%;
}
h3{
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.active{
    border-bottom:3px solid #d30d05; 
}
.total{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.header{
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;
    position: relative; 
    
    img{
        width: 100%;
    } 
    .music-on{
        position: absolute;
        right: 5%;
        top:5%;
        width: 30px;
        animation:music-c 1s linear infinite;
        display: block;
    }
    .music-off{
        position: absolute;
        right: 5%;
        top:5%;
        width: 30px;
        display: none;
    }
    div{
        width: 100%;
        height: 20%;
        // background: skyblue;
        position: absolute;
        left: 0;
        bottom: 0;
        color: @aa;
        .sousuo{
            position: absolute;
            left: 29%;
            top: 34%;
            
        }
        .ss{
            position: absolute;
            left:35%;
            top: 27%; 
        }
        .xiaoxi{
            position: absolute;
            left: 52%;
            top: 33%;
        }
        .ly{
            position: absolute;
            left: 57%;
            top:28%;
        }
    }
    
}
.banner{
    max-width: 640px;
    min-width: 320px;
    margin: 0 auto;    
    width: 100%;
    position: relative;
    top: -3px;
    .wcb{
        width: 100%;
        position: relative;
        p{
            width: 50%;
            float: left;
            height: 40px;
            background: @bb;
            text-align: center;
            line-height: 40px; 
        }
        span{
            position: absolute;
            width:2px;
            height: 70%;
            background: @aa;
            left: 50%;
            top: 17%;
        }
        
    }
    .blow{
        width: 100%;
        flex: 1; 
        ul{
            width: 100%;
            height: 300px;
            overflow: auto;
            display: none;
            li{
                width: 27%;
                margin-left: 5%;
                margin-top: 4%;
                border:1px solid red;
                float: left; 
                text-align: center;
                padding: 1%;
                .square{
                    background: #c52921;
                    border-radius: 5px;
                    color: @aa;
                    font-size: 12px;
                }
            }
            
        }
    }
    .blow .xianshi{
        display: block;
    }
    @keyframes music-c {
        from {transform:rotate(0)}
        to {transform:rotate(360deg)}
    }
}
